/* eslint-disable react/no-array-index-key */
import React, { FC, useEffect, useState } from 'react';
import { Button } from 'antd-mobile';
import classnames from 'classnames';
import anime from 'animejs/lib/anime.es';

import SkillDesc from 'entity/SkillDesc';
import styles from './skill-drawer.module.less';

interface ISkillDrawerProp {
  active: string;
  skill?: SkillDesc;
  onClose: () => void
}

const SkillDrawer:FC<ISkillDrawerProp> = (props) => {
  const { active, skill, onClose } = props;

  // 当前等级
  const [current, setCurrent] = useState<number>(0);
  useEffect(() => {
    if (skill) {
      setCurrent(skill.level - 1);
    }
  }, [skill]);
  // 动画
  const ref = React.createRef<HTMLDivElement>();
  useEffect(() => {
    anime({
      targets: ref.current,
      translateY: () => {
        if (active === '') {
          return '110%';
        }
        return '0';
      },
    });
  }, [active, ref]);

  // dependent
  const dependent = (value:string) => {
    const el = [];
    if (value?.includes('腕')) {
      el.push('腕');
    }
    if (value?.includes('頭')) {
      el.push('頭');
    }
    if (value?.includes('脚')) {
      el.push('脚');
    }
    if (value?.includes('STR')) {
      el.push('STR');
    }
    if (value?.includes('WIS')) {
      el.push('WIS');
    }
    if (value?.includes('LUC')) {
      el.push('LUC');
    }
    if (value?.includes('INT')) {
      el.push('INT');
    }
    return el;
  };
  // 攻击类型
  const weakType = (value:string) => {
    const el = [];
    if (skill?.type) {
      el.push(skill.type);
    }
    if (skill?.weapon) {
      el.push(skill.weapon);
    }
    if (value?.includes('近身')) {
      el.push('近');
    }
    if (value?.includes('远程')) {
      el.push('远');
    }
    if (value?.includes('斩')) {
      el.push('斩');
    }
    if (value?.includes('突')) {
      el.push('突');
    }
    if (value?.includes('壊')) {
      el.push('壊');
    }
    if (value?.includes('炎')) {
      el.push('炎');
    }
    if (value?.includes('冰')) {
      el.push('冰');
    }
    if (value?.includes('雷')) {
      el.push('雷');
    }
    return el;
  };
  return (
    <div
      className={classnames(styles.skillDrawer)}
      ref={ref}
      role="button"
      tabIndex={0}
      onKeyDown={() => {}}
    >
      <div className={classnames('df')}>
        <div className={classnames('flex-1 ft-16')}>
          <span>{skill?.name}</span>
          {
            skill?.cname && skill?.cname !== skill?.name ? (
              <>
                -
                <span className="ft-12">{skill?.cname}</span>
              </>
            ) : null
          }
        </div>
        {skill?.dependent ? dependent(skill.dependent).map(
          (o, i) => <div key={i} className={styles.skillDrawerIcon}>{o}</div>,
        ) : null}
        <div
          role="button"
          tabIndex={0}
          onKeyDown={() => {}}
          className={styles.closeIcon}
          onClick={() => { onClose(); }}
        >
          x
        </div>
      </div>
      <div>
        {weakType(skill?.desc).map((o, i) => <span key={i} className="mgr-8 bold">{o}</span>)}
      </div>
      <div>{skill?.desc}</div>
      {
        skill?.level > 1 ? (
          <div className={classnames(styles.levelRow, 'mgt-4 ft-12 df')}>
            {new Array(skill?.level).fill(1).map(
              (o, i) => (
                <Button
                  key={i}
                  onClick={(e) => {
                    e.stopPropagation();
                    setCurrent(i);
                  }}
                  className={classnames(
                    styles.level,
                    'btn-nostyle mgr-4',
                    current === i ? styles.activeLevel : null,
                  )}
                >
                  {i + 1}
                </Button>
              ),
            )}
          </div>
        ) : null
      }
      <div className={classnames('mgt-4')}>
        {
          skill && Object.keys(skill.row).map((key) => (
            <div key={key} className={classnames(styles.row, 'df')}>
              <div className={styles.fixed}>{key}</div>
              {
                skill?.level === 0 ? (
                  <div>{skill?.row[key][0]}</div>
                ) : (
                  <div>{skill?.row[key][current]}</div>
                )
              }
            </div>
          ))
        }
        {
          skill?.remark?.map((o) => {
            if (o.includes(':')) {
              return (
                <div key={o} className={classnames(styles.row, styles.fixed, 'df')}>
                  <div key={o.split(':')[0]}>{o.split(':')[0]}</div>
                  <div key={o.split(':')[1]}>{o.split(':')[1]}</div>
                </div>
              );
            }
            return (
              <div key={o} className={classnames(styles.row, styles.fixed)}>{o}</div>
            );
          })
        }
      </div>
    </div>
  );
};

export default SkillDrawer;
